<template>
	<view class="submit page bgf5 ">
		<scroll-view scroll-y class="list bgf5 pt12 boxS" v-if="data != null">
			<view class="bgff box fs15 bold6 r10 px14 py2 mx10 bor">
				<view class="py8">预约门店：[{{data.shop_name}}]</view>
				<view class="py8">预约包间：{{data.name}}</view>
				<view class="py8">包间状态：
					<text class="bor57 r4 px10 py2 fs12 bold4" v-if="data.status == 'free'">空闲中</text>
					<text class="bor57 r4 px10 py2 fs12 bold4" v-else>使用中</text>
				</view>
			</view>

			<view class="bgff r10 room mb8 mx10 mt10">

				<scroll-view scroll-x class="mt8">
					<view class="px10 fs12 nowrap">
						<view v-for="(item, index) in data.date" :key="index" @click="doSelectDate(item)"
							class="aliC r5 w40 px12 py4 mx3 flex flexCol flexC"
							:class="item.selected == true? 'active' : ''">
							<view class="">{{item.date}}</view>
							<view class="mt2">{{item.week}}</view>
						</view>

					</view>
				</scroll-view>
				<!-- 按小时 -->
				<view v-if="currentTab == 0" class="py10 px9 mt8">
					<view class="flex flexS">
						<text class="bold6 pt6">时长选择：</text>
						<view class="flex1 flex flexC flexW">
							<view v-for="(item, index) in data.hours" :key="index" @click="doSelectHour(index)"
								class="aliC r2 w-25 py5 boxS mx3 mb6 flex flexCol flexC"
								:class="selectHourIndex  == index ? 'bor57' : 'bor c99'">
								{{item}}小时
							</view>

							<view @click="doSelectHour(-1)" class="aliC r2 w-25 py5 boxS mx3 mb6 flex flexCol flexC"
								:class="selectHourIndex  == -1 ? 'bor57' : 'bor c99'">

								<picker mode="multiSelector" :range="array1" @change="pickSelect" :value='value'>
									<view>其它</view>
								</picker>
							</view>
						</view>
					</view>

					<view class="flex flexC fs18 bold6 py8">
						<text class="fs14">时间选择：</text>
						<view class="flex1 flex flexJC flexE bor57 bgff r40 px16 py4">
							<picker mode="time" :value="data.startTime" @change="bindTimeChange">
								<text>{{data.startTime}}</text>
							</picker>

							<image class="w12 ml6 mb5" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
						</view>
						<text class="fs14 px14 aliC">到</text>
						<view class="flex1 flex flexJC flexE bor bgff r40 px16 c85 py4">
							<text>{{data.endTime}}</text>
						</view>
					</view>
				</view>

				<!-- 按套餐 -->
				<view v-else-if="currentTab == 1" class="py10 px9 mt8">
					<view class="flex flexC mb6">
						<text class="bold6 fs15">套餐选择：</text>
						<scroll-view scroll-x style="width: calc(100% - 150rpx);">
							<view class="nowrap">
								<view v-for="(item, index) in data.set" :key="index" @click="doSetSelect(index)"
									class="aliC r4 w33 boxS mx3 mb6 flex flexCol flexC"
									:class="index == selectSetIndex ? 'active' : 'bgff'">
									<view class="flex flexC">
										<text class="ml4 fs12">{{item.name}}</text>
									</view>
									<view class="fs14 bold6">￥{{item.amount}}</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
					<view class="flex flexC" v-if="data.yh_set.length >0">
						<text class="bold6 fs15 cff0">优惠套餐：</text>
						<scroll-view scroll-x style="width: calc(100% - 150rpx);">
							<view class="nowrap">
								<view v-for="(item, index) in data.yh_set" :key="index" @click="doSetSelect2(index)"
									class="aliC r4 w41 boxS mx3 mb6 flex flexCol flexC"
									:class="index == yhSelectSetIndex ? 'active' : 'bgff'">
									<view class="flex flexC">
										<text class="ml4 fs12 tc">{{item.name}}</text>
									</view>
									<view class="fs14 bold6">￥{{item.amount}}</view>
								</view>
							</view>
						</scroll-view>
					
					</view>

					<view class="flex flexC fs18 bold6 py8">
						<text class="bold6 fs15">时间选择：</text>
						<view class="flex1 flex flexJC flexE bor57 bgff r40 px16 py4">
							<picker mode="time" :value="data.startTime" @change="bindTimeChange">
								<text>{{data.startTime}}</text>
								<image class="w12 ml10" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
							</picker>
							
						</view>
						<text class="fs14 px14 aliC">到</text>
						<view class="flex1 flex flexJC flexE bor bgff r40 px16 c85 py4">
							<text>{{data.endTime}}</text>
						</view>
					</view>

					<view class="mt2 mb4 ml6 mr6">
						<view class="flex flexC bgc3">
							<text v-for="(item,index) in oneTimeList" :key="index" class="line hour_w boxS"
								:class="item.isBook == true  ? 'bg58' : item.isSelect == false ? 'bgc3' : 'bg56'">
							</text>
						</view>
						<view class="flex flexS fs10">
							<text v-for="(item,index) in oneTimeList" :key="index"
								class="hour_w boxS">{{item.hour}}</text>

						</view>
						<view class="flex flexC mt6 ">

							<text class="bg58 px5 py3 r2"></text>
							<text class="c00 fs12 ml5 mr14">已预定</text>
							<text class="bgc3 px5 py3 r2" style="height: 4px"></text>
							<text class="c00 fs12 ml5 mr14">可预定</text>
							<text class="bg56 px5 py3 r2" style="height: 4px"></text>
							<text class="c00 fs12 ml5">预定中</text>
						</view>
					</view>
				</view>
			</view>

			<view class="bgff r10 room mb8 pb14 px14 mx10">
				<view class="flex flexC flexB fs16 borb pt10 pb8">
					<text class="bold6">订单总价</text>
					<text class="cff0">￥{{data.total_price}}</text>
				</view>
				<view class="flex flexC flexB pt10">
					<text>预约时长</text>
					<text>{{data.book_hour}}小时</text>
				</view>
				<view class="flex flexC flexB pt10">
					<text>包厢单价</text>
					<text>{{data.book_price}}元/小时</text>
				</view>
				<!-- 	<view class="flex flexC flexB pt14">
					<text>会员特价</text>
					<text>26元/小时</text>
				</view> -->

				<view class="flex flexC pt10 mt10 mb4 bortd" v-if="mtCode == '' && douCode == ''" @click="checkCode()">
					
					<image class="w20" src="/static/img/icon/meituan.png" mode="aspectFill"></image>
					<image class="w20" style="margin-left: 2px;" src="/static/img/icon/dou.png" mode="aspectFill"></image>
					<image class="w20" style="margin-left: 2px;" src="/static/img/icon/ks_icon.png" mode="aspectFill"></image>
					<view class="flex1 pl10">美团/抖音/快手自助验券</view>
					
					<image class="w20" src="/static/img/icon/scan.png" mode="aspectFill"></image>
				</view>
				
				<view class="flex flexC pt10 ">
					<image class="w20" src="/static/img/icon/tuan.png" mode="aspectFill"></image>
					<text class="flex1 pl10">团购券</text>
					<view class="bgac r40 c57 flex flexC px10 py4">
						<text class="fs12 mr5" v-if="tuanList.length == 0">暂无可用团购券</text>
						<text @click="showTuan" class="fs12 mr5"
							v-else-if="tuanList.length > 0 && tuanId == -1">{{tuanList.length}}张可用券</text>
						<text @click="showTuan" class="fs12 mr5" v-else>{{selectTuanName}}</text>
				
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="flex flexC pt10 ">
					<image class="w20" src="/static/img/icon/youhui.png" mode="aspectFill"></image>
					<text class="flex1 pl10">优惠券</text>
					<view class="bgac r40 c57 flex flexC px10 py4">
						<text class="fs12 mr5" v-if="couponList.length == 0">暂无可用优惠券</text>
						<text @click="showCoupon" class="fs12 mr5"
							v-else-if="couponList.length > 0 && couponId == -1">{{couponList.length}}张可用券</text>
						<text @click="showCoupon" class="fs12 mr5" v-else>{{selectCouponName}}</text>

						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="flex flexC pt10" v-if="mtCode != ''">
					<image class="w20" src="/static/img/icon/meituan.png" mode="aspectFill"></image>
					<text class="flex1 pl10">美团券</text>
					<view class="bgac r40 c57 flex flexC px10 py4">
						<text class="fs12 mr5">券码{{mtCode}}</text>
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="flex flexC pt10" v-if="douCode != ''">
					<image class="w20" src="/static/img/icon/dou.png" mode="aspectFill"></image>
					<text class="flex1 pl10">抖音券</text>
					<view class="bgac r40 c57 flex flexC px10 py4">
						<text class="fs12 mr5">{{douCode}}</text>
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="flex flexC pt10" v-if="ksCode != ''">
					<image class="w20" src="/static/img/icon/ks_icon.png" mode="aspectFill"></image>
					<text class="flex1 pl10">快手券</text>
					<view class="bgac r40 c57 flex flexC px10 py4">
						<text class="fs12 mr5">{{ksCode}}</text>
						<image class="w5" src="/static/img/icon/right_sel.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="flex flexC pt10">
					<image class="w20" src="/static/img/icon/yue.png" mode="aspectFill"></image>
					<text class="flex1 pl10">账户余额({{data.balance}})</text>
					<view class="cff0" v-if="data.balance == 0">余额不足，请充值</view>
					<view class="cff0" v-else>可抵扣￥{{data.dis_price}}</view>

				</view>

			</view>
		</scroll-view>
		<view class="fixed bgff px14 pb20 pt10" v-if="data != null">
			<view class="flex flexC">
				<view class="flex1 bg00 fs12 cff pl16 pr10 py4">
					<view class="">
						<text>实付：</text>
						<text class="c57 fs10">￥</text>
						<text class="c57 fs18 bold6">{{data.pay_price}}</text>
					</view>
					<view class="">
						<text>共计{{data.book_hour}}小时/总金额:{{data.total_price}}</text>
					</view>
				</view>
				<view @click="$refs.rechargePicker.open()" class="btn px14 py4 fs16 c00">确定预约</view>
			</view>
		</view>
		<!-- <view class="fixed flex flexC r40 bgff" v-if="data != null">
			<view class="flex1 pl12 pb4">
				<view class="bold6 c00">
					<text class="fs12">实付：</text>
					<text class="cff0 fs16">￥{{data.pay_price}}</text>
				</view>
				<view class="fs12 c85">共{{data.book_hour}}小时</view>
			</view>
			<view class="bgc4 px8 btn flex flexCol flexC pt4 boxS">
				<view class="fs16 bold6" @click="charge">余额充值</view>
				<text class="fs12">（享优惠）</text>
			</view>
			<view class="bgf6c btn bold6 flex flexC flexJC fs16 px8" @click="addBook">立即预定</view>
		</view> -->
		<uni-popup ref="phonePicker" type="bottom">
			<button open-type="getPhoneNumber" class="bglineEb fs16 py4 btn bg57"
				@getphonenumber="getPhone">完善手机号下单</button>
		</uni-popup>

		<uni-popup ref="couponPicker" type="bottom">
			<select-coupon @clickUseCoupon="clickUseCoupon" :list="tuanList" ref="selectCoupon"></select-coupon>
		</uni-popup>

		<uni-popup ref="yhPicker" type="bottom">
			<yh-coupon @clickUseCoupon="clickUseCoupon2" :list="couponList" ref="yhCoupon"></yh-coupon>
		</uni-popup>
		
		<uni-popup ref="rechargePicker" type="bottom" :safeArea="false">
			<view class="aliC cover">
				<image class="r50" src="/static/logo.jpg" mode="aspectFill"></image>
				<text class="fs26 close" @click="$refs.rechargePicker.close()">×</text>
			</view>
			<scroll-view class="bgf5 pt26" scroll-y style="height: 85vh;">
				<view class="confirmPopup bgff pb16 mx5 shadow flex flexCol r12 px12">
					<view class="fs18 bold6 borb pt18 pb12 mb12 aliC">预约信息确认</view>
					<view class="flex flexC w-20 borb pb14">
						<image class="poster mr10 r8" src="/static/logo.jpg" mode="aspectFill"></image>
						<view class="flex1 c99">
							<view class="mb4">预约门店:【{{data.shop_name}}】</view>
							<view class="mb4">预约包间: {{data.name}}</view>
							<view class="mb4 bold8 cff0">开始时间:{{data.start}}</view>
							<view class="cff0 bold8">结束时间:{{data.end}}</view>
						</view>
					</view>

					<view class="cff0 fs16 pt12 pb6 bold6">客户须知:</view>
					<view class="cff0 my4">1、预定的订单将全时段保留,迟到不可顺延和退款</view>
					<view class="cff0 my4">2、若订单时段前包厢无使用,可提前开始订单,但订单总时长不变</view>
					<view class="cff0 my4">3、订单开始前1小时内取消订单需核收15%退单费,请合理规划您的时间</view>

				</view>
				<view class="bgff rechargePopup pb30 mt12 mx5 shadow">
					<view class="aliC pl31 flex flexC py19">
						<text class="flex1 fs18 bold6">会员充值 更划算</text>
					</view>
					<view class="flex flexC cont flexW px9">
						<view @click="clickChargeSelect(index)" v-for="(item,index) in chargeList" :key="index"
							class="item boxS r7 mt10 p7 mx2 flex flexJC flexCol aliC">
							<view class="">充值</view>
							<view class="bold6 fs14">￥{{item.amount}}</view>
							<view class="fs12 bgff4 r3">赠送￥{{item.get_amount-item.amount}}</view>
							<view class="aliR mt5 radio">
								<radio :checked="false" style="transform: scale(.7);" color="#fff" />
								<image v-if="selectChargeIndex == index" class="" src="/static/img/icon/checked.png"
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 190rpx;"></view>
			</scroll-view>
			<view class="fixed bgff px14 pb20 pt10" v-if="data != null">
				<view class="flex flexC">
					<view class="flex1 bg00 fs14 cff pl16 pr10 py4">
						<view class="">
							<text>实付：</text>
							<text class="c57 fs14">￥</text>
							<text class="c57 fs18 bold6">{{data.pay_price}}</text>
						</view>
						<view class="">
							<text>共计{{data.book_hour}}小时/总金额:{{data.total_price}}</text>
						</view>
					</view>
					<view @click="goBook()" class="btn px14 py4 fs16 c00">马上预约</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup type="center" ref="confirmPopup">
			<view class="confirmPopup bgff pb40 flex flexCol r12 px12">
				<view class="aliC cover">
					<image class="r50" src="/static/logo.jpg" mode="aspectFill"></image>
				</view>
				<view class="fs18 bold6 py8 mb12 borb aliC">预约信息确认</view>
				<view class="c99 my4">预约门店:【{{data.shop_name}}】</view>
				<view class="c99 my4">预约包间: {{data.name}}</view>
				<view class="c99 my4">开始时间:{{data.start}}</view>
				<view class="c99 my4 pb16 borb">结束时间:{{data.end}}</view>
				<view class="cff0 fs16 pt12 pb6 bold6">客户须知:</view>
				<view class="cff0 my4">1、预定的订单将全时段保留,迟到不可顺延和退款</view>
				<view class="cff0 my4">2、若订单时段前包厢无使用,可提前开始订单,但订单总时长不变</view>
				<view class="cff0 my4">3、订单开始前1小时内取消订单需核收15%退单费,请合理规划您的时间</view>
				<view class="flex flexC btns mt20">
					<view class="cancelbtn r40 fs16 mx12" @click="$refs.confirmPopup.close()">返回修改</view>
					<view class="confirmbtn r40 fs16 cff mx12" @click="firstBook()">立即预定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
import icon from '../../uni_modules/uview-ui/libs/config/props/icon';

	export default {
		data() {
			return {
				tabs: ['小时模式', '套餐模式'],
				currentTab: 1,
				param: null,
				data: null,
				selectHourIndex: -1,
				hour: '',
				date: '',
				startTime: '',
				setId: -1,
				order_no: '',
				shop_id: '',
				room_id:'',
				tuanList: [],
				tuanId: -1,
				selectTuanName: '',
				startDate: '',
				tempHour: '',
				oneTimeList: [],
				twoTimeList: [],
				oneDate: '',
				twoDate: '',
				mtCode: '',
				isFirst: true,
				douCode: '',
				array1: [
					['1小时', '2小时', '3小时', "4小时", "5小时", "6小时", "7小时", "8小时", "9小时", "10小时"],
					['0', '30分钟']
				],
				couponList: [],
				selectCouponName: '',
				couponId: -1,
				isPaying: false,
				chargeList: [],
				selectChargeIndex: -1,
				chargeId: -1,
				// yh_set:[],
				selectSetIndex: -1,
				yhSelectSetIndex:-1,
				ksCode:'',

			};
		},
		onLoad(option) {
			if (option.item) {
				var item = option.item;
				console.info("========进入下单页面参数========"+item);
				this.param = JSON.parse(item);
				this.shop_id = this.param.shop_id;
				this.room_id = this.param.id;
				var hour = this.param.hour;
				this.startDate = this.param.startDate;
				this.date = this.param.startDate;
				this.hour = hour;
				this.tempHour = hour;

				console.info("+===hour===" + hour);
				if (hour == -1) {
					let date = new Date();
					let h = date.getHours(); //获取小时
					let m = date.getMinutes(); //获取分钟
					console.info("======startTime=====" + this.param.startTime);
					if (this.param.startTime != "") {
						this.startTime = this.param.startTime;
					} else {
						this.startTime = h + ":" + m;
					}
				} else {
					if (this.param.endDate != '') {
						this.date = this.param.endDate;
					} else {
						this.date = this.param.startDate;
					}
					this.startTime = this.param.startTime.time.split("-")[0];

				}
			}
			
			if (option.meituan) {
				this.param = JSON.parse(option.meituan);

				this.shop_id = this.param.shop_id;
				var hour = this.param.hour;
				this.startDate = this.param.startDate;
				this.date = this.param.startDate;
				this.hour = hour;
				this.tempHour = hour;
				this.startTime = this.param.startTime;
				this.mtCode = this.param.mtCode;

			}

			if (option.dou) {
				this.param = JSON.parse(option.dou);
				this.shop_id = this.param.shop_id;
				var hour = this.param.hour;
				this.startDate = this.param.startDate;
				this.date = this.param.startDate;
				this.hour = hour;
				this.tempHour = hour;
				this.startTime = this.param.startTime;
				this.douCode = this.param.douCode;

			}
			
			if (option.ks) {
				this.param = JSON.parse(option.ks);
				this.shop_id = this.param.shop_id;
				var hour = this.param.hour;
				this.startDate = this.param.startDate;
				this.date = this.param.startDate;
				this.hour = hour;
				this.tempHour = hour;
				this.startTime = this.param.startTime;
				this.ksCode = this.param.douCode;
			
			}

			if (option.q) {
				let scan_url = decodeURIComponent(option.q);

				console.info("===option==" + scan_url)

				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				this.shop_id = result.split("-")[0];
				var room_id = result.split("-")[1];
				var obj = new Object();
				obj.id = room_id;
				this.param = obj;
				let date = new Date();
				let year = date.getFullYear(); //获取当前年份
				let mon = date.getMonth() + 1; //获取当前月份
				let da = date.getDate(); //获取当前日
				let h = date.getHours(); //获取小时
				let m = date.getMinutes(); //获取分钟
				if (h < 10) {
					h = "0" + h;
				}
				if (m < 10) {
					m = "0" + m;
				}
				this.startTime = h + ":" + m;
				if (mon < 10) {
					mon = "0" + mon
				}
				if (da < 10) {
					da = "0" + da;
				}
				this.date = year + "-" + mon + "-" + da;
				this.hour = 4;
				this.tempHour = 4;
			}

			if (option.scene) {
				let scan_url = decodeURIComponent(option.scene);
				
				console.info("===扫码进入后的参数为===" + scan_url);

				var index = scan_url.lastIndexOf("\/");
				var result = scan_url.substring(index + 1, scan_url.length);
				this.shop_id = result.split("-")[0];
				var room_id = result.split("-")[1];
				this.room_id = room_id;
				var obj = new Object();
				obj.id = room_id;
				this.param = obj;
				let date = new Date();
				let year = date.getFullYear(); //获取当前年份
				let mon = date.getMonth() + 1; //获取当前月份
				let da = date.getDate(); //获取当前日
				let h = date.getHours(); //获取小时
				let m = date.getMinutes(); //获取分钟
				if (h < 10) {
					h = "0" + h;
				}
				if (m < 10) {
					m = "0" + m;
				}
				this.startTime = h + ":" + m;
				if (mon < 10) {
					mon = "0" + mon
				}
				if (da < 10) {
					da = "0" + da;
				}
				this.date = year + "-" + mon + "-" + da;
				this.hour = 4;
				this.tempHour = 4;
			}
			
			if (option.id) {
				var obj = new Object();
				obj.id = option.id;
				this.param = obj;
				this.room_id = option.id;
				let date = new Date();
				let year = date.getFullYear(); //获取当前年份
				let mon = date.getMonth() + 1; //获取当前月份
				let da = date.getDate(); //获取当前日
				let h = date.getHours(); //获取小时
				let m = date.getMinutes(); //获取分钟
				if (h < 10) {
					h = "0" + h;
				}
				if (m < 10) {
					m = "0" + m;
				}
				this.startTime = h + ":" + m;
				if (mon < 10) {
					mon = "0" + mon
				}
				if (da < 10) {
					da = "0" + da;
				}
				this.date = year + "-" + mon + "-" + da;
				this.hour = 4;
				this.tempHour = 4;
			}

			console.info("==data==" + this.date);
			
			console.info("==扫码后包厢id==" + this.room_id);
			
		},

		onShow() {

			var token = uni.getStorageSync("token")
			if (token != "") {
				this.havePhone();
				this.checkXuOrder();
			}
			this.init();
			this.getCharge();
		},

		methods: {

			firstBook() {
				this.$refs.confirmPopup.close()
				if (this.chargeList.length == 0) {

					this.addBook();
				} else {
					this.$refs.rechargePicker.open()
				}

			},

			clickChargeSelect(index) {
				if (index == this.selectChargeIndex) {
					this.selectChargeIndex = -1;
				} else {
					this.selectChargeIndex = index;

				}
				if (this.selectChargeIndex != -1) {
					this.chargeId = this.chargeList[index].id;

				} else {
					this.chargeId = "-1";
				}

				console.info("===chargeId===" + this.chargeId);
			},

			goBook() {
				if (this.chargeId == -1) {
					this.addBook();
				} else {
					this.doCharge();
				}
			},
			
			checkXuOrder() {
				let param = {};
				let that = this;
				var order_no  = "";
				this.$api.checkOrderDoing(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
		
						if (res.data != -1) {
							order_no = res.data;
							uni.showModal({
								title:"订单提示",
								content:"您有订单正在进行中,是否需要续费",
								complete(res) {
									if(res.confirm){
										uni.navigateTo({
											url:'../order/detail?order_no='+order_no+"&is_xu=1"
										})
									}
								}
							})
						}

					} 
				})
			},

			havePhone() {
				let param = {};
				let that = this;
				this.$api.haveMobile(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						if (res.data == "") {
							uni.showModal({
								title: "提示",
								content: "为了给您提供更好的服务，请先完善手机号",
								confirmText: "完善",
								complete(res) {
									uni.navigateTo({
										url: '../member/updatePhone'
									})
								}
							})
						}

					} else {

					}
				})
			},
			
			doCharge() {
				let param = {
					charge_id: this.chargeId
				};
				let that = this;
				this.$api.charge(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.chargeWechatPay(res.data.payInfo)

					} else {

					}
				})
			},
			
			chargeWechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
						that.addBook();
					},
					fail: function(err) {
						uni.showToast({
							title: "取消充值",
							icon: 'none'
						});
					}
				});
			},

			getCharge() {
				let param = {
					shop_id: this.shop_id
				};
				let that = this;
				this.$api.getChargeInfo(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.chargeList = res.data.chargeList;

					} else {

					}
				})
			},

			pickSelect(e) {
				console.log(e.detail.value)
				var hour = e.detail.value[0];
				var time = e.detail.value[1];
				var tmp = hour + 1;

				if (time == 1) {
					tmp = hour + 1.5;
				}
				if (tmp < this.data.hours[0]) {
					uni.showToast({
						title: "最低起订" + this.data.hours[0] + "小时",
						icon: 'error'
					})
					return;

				}
				this.hour = tmp;
				this.tempHour = this.hour;

				this.init();
			},

			clickUseCoupon(item) {

				this.$refs.couponPicker.close();
				if (item == null) {
					this.tuanId = -1;
				} else {
					this.tuanId = item.id;
					this.selectTuanName = item.tuan.name;
				}
				this.init();
			},

			clickUseCoupon2(item) {
				this.$refs.yhPicker.close();
				if (item == null) {
					this.couponId = -1;
				} else {
					this.couponId = item.id;
					this.selectCouponName = item.coupon.name;
				}
				this.init();
			},

			showTuan() {
				this.$refs.couponPicker.open();
			},
			
			showCoupon() {
				this.$refs.yhPicker.open();
			},

			article() {
				uni.navigateTo({
					url: '../member/article?name=' + '如何预约'
				})
			},

			charge() {
				uni.setStorageSync("shopId", this.shop_id);
				uni.setStorageSync("tabIndex", 0);

				uni.switchTab({
					url: '../discount/index'
				})
			},

			//选择套餐
			doSetSelect(index) {
				this.selectSetIndex = index;
				this.hour = this.data.set[index].hour;
				this.setId = this.data.set[index].id;
				this.yhSelectSetIndex = -1;
				this.init();
			},
			
			doSetSelect2(index){
				var start = this.data.yh_set[index].time;
				var end = this.data.yh_set[index].end_time;
				let that = this;
				uni.showModal({
					title:"提示",
					content:"此套餐是优惠套餐,使用时间段是："+start+"~"+end,
					complete(res) {
						if(res.confirm == true){
							that.yhSelectSetIndex = index;
							that.setId = that.data.yh_set[index].id;
							that.hour = that.data.yh_set[index].hour;
							// that.startTime = start;
							that.data.startTime = that.startTime;
							that.selectSetIndex = -1;
							that.init();
						}
					}
				})				
			},
			
			//选择小时间
			doSelectHour(index) {
				this.selectHourIndex = index;
				if (index != -1) {
					this.hour = this.data.hours[index];
					this.tempHour = this.hour;
					this.init();
				}

			},
			
			//选择日期
			doSelectDate(item) {

				for (var i = 0; i < this.data.date.length; i++) {
					this.data.date[i].selected = false;
				}
				this.yhSelectSetIndex = -1;
				this.selectSetIndex = 0;
				item.selected = true;
				this.date = item.dateValue;
				console.info("=====date====" + this.date);
				this.init();
			},
			
			bindTimeChange(e) {
				this.startTime = e.detail.value;
				this.data.startTime = this.startTime;
				console.info("=====time1=gsf===" + this.data.startTime);
				console.info("=====time2=gsf===" + this.date);
				this.init();
			},

			init() {
				let param = {
					id: this.param.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					type: this.currentTab,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					couponId: this.couponId,
					ksCode:this.ksCode,
					setId:this.setId
				};
				let that = this;
				console.info("==param=999=" + JSON.stringify(param))
				this.$api.orderInit(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

						that.data = res.data;
						that.startTime = res.data.startTime;
						that.tuanList = res.data.tuanList;
						that.couponList = res.data.couponList;
						console.info("===set==" + that.data.set.length);

						if (that.data.set.length > 0 && that.yhSelectSetIndex == -1) {

							for (var i = 0; i < that.data.set.length; i++) {
								if (that.data.set[i].hour == that.hour) {
									this.selectSetIndex = i;
									this.isFirst = false;
									break;
								}
							}

							console.info("===isFirst==" + this.isFirst);
							if (this.isFirst == true) {
								this.currentTab = 1;
								this.selectSetIndex = 0;
								this.selectSetIndex = this.selectSetIndex;
								this.hour = this.data.set[this.selectSetIndex].hour;
								this.setId = this.data.set[this.selectSetIndex].id;
							}
						}
						console.info("====hour=====" + that.hour);
						if (that.hour == -1) {
							this.hour = this.data.hours[0];
							this.tempHour = this.hour;
							this.selectHourIndex = 0;
						} else {
							if (this.currentTab == 1) {
								if (this.data.set.length > 0 && this.selectSetIndex != -1) {
									this.selectSetIndex = this.selectSetIndex;
									this.hour = this.data.set[this.selectSetIndex].hour;
									this.setId = this.data.set[this.selectSetIndex].id;
									console.info("==hour=1==" + this.hour);
									console.info("==setId=1==" + this.setId);
								} else {

								}
							} else {
								this.hour = this.tempHour;
								this.setId = -1;
							}
						}

						that.isFirst = false;

						console.info("===tab=====" + this.currentTab);

						this.init2();
						if (res.msg != '') {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					} else {

					}
				})

			},

			init2() {
				let param = {
					id: this.param.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					type: this.currentTab,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					couponId: this.couponId,
					setId:this.setId,
					ksCode:this.ksCode

				};
				console.info("==param==" + JSON.stringify(param))
				let that = this;
				this.$api.orderInit(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.data = res.data;

			
						if (this.date == "") {
							this.data.date[0].selected = true;
							this.date = this.data.date[0].dateValue;
						}
						this.date = res.data.selectDate;
						console.info(res.data.selectDate+"====selectDate======"+this.date);
						that.checkOrderTime();
						that.startTime = res.data.startTime;
						console.info("====orderInit=2 time===" + that.startTime)
						that.tuanList = res.data.tuanList;
						that.couponList = res.data.couponList;
						if (res.msg != '') {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
					} else {

					}
				})

			},

			checkOrderTime() {
				let param = {
					date: this.date,
					room_id: this.param.id,
					hour: this.hour,
					starTime: this.startTime
				};
				let that = this;
				this.$api.checkOrderBookTime(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.oneTimeList = res.data.list;
						that.oneDate = res.data.date;
						that.twoDate = res.data.date2;
						that.twoTimeList = res.data.list2;

					} else {

					}
				})
			},

			restore() {
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.restore(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {

					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},

			addBook() {

				let param = {

					id: this.param.id,
					date: this.date,
					hour: this.hour,
					startTime: this.startTime,
					setId: this.setId,
					tuanId: this.tuanId,
					mtCode: this.mtCode,
					douCode: this.douCode,
					couponId: this.couponId,
					ksCode:this.ksCode

				};

				if (this.isPaying == true) return;
				this.isPaying = true;
				console.info("==param==" + JSON.stringify(param))
				let that = this;
				this.$api.addBookOrder(param).then(res => {
					console.info(JSON.stringify(res));
					that.isPaying = false;
					if (res.code == 1) {
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						} else {
							uni.redirectTo({
								url: '../order/detail?order_no=' + that.order_no
							})
						}

					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})
			},

			wechatPay(payConfig) {
				
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {

						uni.redirectTo({
							url: '../order/detail?order_no=' + that.order_no
						})

					},
					fail: function(err) {
						that.restore();
						uni.showToast({
							title: "取消预定",
							icon: 'none'
						});
					}
				});
			},
			
			switchTab(d) {
				this.currentTab = d;
				this.selectSetIndex = 0;
				console.info("===d==" + d);
				if (this.currentTab == 0) {
					this.setId = -1;
					this.hour = this.tempHour;
				}
				this.init();
			},
			
			checkCode(){
				//清空原有美团/抖音券码
				this.mtCode = '';
				this.douCode = '';
				uni.navigateTo({
					url:'/pages/home/couponAll?shop_id='+this.shop_id+"&room_id="+this.room_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		position: relative;

		.cover {
			margin-top: -50rpx;
			position: absolute;
			z-index: 99;
			width: 100%;

			image {
				width: 120rpx;
				height: 120rpx;
				border: 8rpx solid #fff;
			}

			.close {
				position: absolute;
				right: 32rpx;
				top: 70rpx;
				width: 70rpx;
				height: 70rpx;
				line-height: 64rpx;
				border-radius: 50%;
				background-color: #e4e1e1;
				color: #fff;
			}
		}

		.confirmPopup {
			.poster {
				width: 170rpx;
				height: 170rpx;
			}

			.btns {
				.cancelbtn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #C3C3C3;
					color: #C3C3C3;
					background-color: #fff;
					box-sizing: border-box;
				}

				.confirmbtn {
					width: 240rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #ff0000;
					background-color: #ff0000;
					box-sizing: border-box;
				}
			}
		}

		.rechargePopup {
			border-radius: 16rpx;

			.bgf6c {
				color: #333;
			}

			.cont {
				.item {
					position: relative;
					width: 218rpx;
					background-color: #FFF9DB;

					.bgff4 {
						background-color: #FF4949;
						color: #fff;
					}

					.radio {
						position: absolute;
						top: 0;
						right: 0;

						image {
							position: absolute;
							top: 10rpx;
							right: 18rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		.status {
			color: #F5C51D;
		}

		.bgc3 {
			background-color: #C3C3C3;
		}

		.line {
			position: relative;
			height: 20rpx;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				background: #FFF;
				width: 2rpx;
				height: 20rpx;
				display: inline-block;
			}

			&:last-child {
				&::after {
					display: none;
				}
			}
		}

		.hour_w {
			width: calc(100% / 24);
		}

		.hours {
			width: 100%;
			position: relative;

			text {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.dinline {
			display: inline-block;
		}

		.bg26 {
			background-color: #F8B62B;
		}

		.bgf6c {
			background-color: #F5C51D;
		}

		.bgf0 {
			background-color: #F0F3FD;
		}

		.progress {
			width: 100%;

			text {
				width: 24rpx;
				height: 24rpx;

				&.bg26 {
					background-color: #F8B62B;
					border: none;
				}

				.bgf6c {
					background-color: #F5C51D;
				}
			}
		}

		.list {
			height: calc(100vh - 180rpx);
			position: relative;

			&::before {
				content: '';
				width: 100%;
				height: 380rpx;
				background: linear-gradient(to bottom, #FFB92B, #F7DF73);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 0;
			}

			.btn {
				color: #333;
			}
		}

		.box {
			position: relative;
			z-index: 1;
		}

		.img {
			width: 204rpx;
			height: 292rpx;
		}

		// .ellipsis1 {max-width: 44vw;}
		.borff0 {
			border: 2rpx solid #ff0000;
		}

		.w5 {
			width: 10rpx;
			height: 10rpx;
		}

		.w30 {
			width: 60rpx;
			height: 60rpx;
		}

		.room {
			overflow: hidden;

			.tabs {
				>view {
					height: 68rpx;
				}

				.active {
					background: #F8B62B;
					color: #fff;
				}
			}

			.nowrap {
				white-space: nowrap;
			}

			.w40 {
				width: 80rpx;
				display: inline-block;

				&.active {
					background: #FFFCE6;
					color: #F5C51D;
					border: 2rpx solid #F5C51D;
				}
			}

			.w15 {
				width: 30rpx;
				height: 30rpx;
			}

			.w12 {
				width: 24rpx;
				height: 24rpx;
			}

			.w33 {
				width: 150rpx;
				border: 2rpx solid #4B4B4B;
				color: #4B4B4B;
				display: inline-block;

				&.active {
					background: #FFFCE6;
					color: #F5C51D;
					border: 2rpx solid #F5C51D;
				}
			}
			
			.w41 {
				width: 180rpx;
				border: 2rpx solid #4B4B4B;
				color: #4B4B4B;
				display: inline-block;
			
				&.active {
					background: #FFFCE6;
					color: #F5C51D;
					border: 2rpx solid #F5C51D;
				}
			}

			.w-25 {
				width: calc(25% - 12rpx);
			}

			.w20 {
				width: 40rpx;
				height: 40rpx;
			}

			.bgac {
				background-color: #F8B62B;
				color: #FFF
			}

			.bortd {
				border-top: 4rpx dashed #DDD
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			box-sizing: border-box;
			overflow: hidden;
			box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, .1);

			.bg00 {
				height: 90rpx;
				border-radius: 80rpx 0 0 80rpx;
			}

			.btn {
				height: 90rpx;
				border-radius: 0 80rpx 80rpx 0;
				line-height: 90rpx;
				background-color: #F8B62B;
			}
		}
	}
	.tc{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>